<template>
  <div class="container">
    <div class="header">
      <span class="project-title-font">{{ projectName }}</span>
      <div>
        <a-button type="primary" @click="createProjectLineModal = true">
          <PlusOutlined /> 新增产线
        </a-button>
      </div>
    </div>
    <div class="body">
      <a-spin
        :spinning="spinning"
        size="large"
        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
      />
      <a-empty
        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
        v-if="lines == null"
      />
      <div class="line-box" v-for="line in lines">
        <div class="line-header">
          <span class="line-text">{{ line.lineName }}</span>
          <a-button
            shape="circle"
            type="primary"
            class="line-button1"
            @click="editLine(line.lineId)"
          >
            <FormOutlined />
          </a-button>
          <a-button
            shape="circle"
            type="primary"
            class="line-button2"
            @click="copyLineModal = true"
          >
            <CopyOutlined />
          </a-button>
        </div>
        <div class="line-body">
          <a-timeline>
            <a-timeline-item
              v-for="row in line.assignmentDtoList"
              :color="getColor(row.assignmentStatus)"
            >
              <template #dot>
                <ClockCircleOutlined style="font-size: 18px" />
              </template>
              <p>{{ row.taskName == null ? '' : '任务名称：' + row.taskName }}</p>
              <div style="display: flex; margin-bottom: 14px">
                <span v-if="row.userList != null" style="white-space: nowrap">承担人员：</span>
                <div style="display: flex; flex-wrap: wrap">
                  <span v-for="user in row.userList" style="margin-right: 5px">
                    {{ user.userName }}
                  </span>
                </div>
              </div>
              <p>
                {{
                  row.endTime == null
                    ? ''
                    : '截至日期：' + dayjs(row.endTime).format('YYYY年MM月DD日 HH:mm:ss')
                }}
              </p>
            </a-timeline-item>
            <a-timeline-item v-if="line.assignmentDtoList.length" color="#00CCFF">
              <template #dot><ClockCircleOutlined style="font-size: 18px" /> </template>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
    </div>
  </div>

  <CreateProjectLineModal
    v-model:model-visible="createProjectLineModal"
    @confirm="findLines()"
  ></CreateProjectLineModal>
  <EditLineModal
    v-model:model-visible="editLineModal"
    :line-id="lineId"
    @confirm="findLines()"
  ></EditLineModal>
  <CopyLineModal
    v-model:model-visible="copyLineModal"
    :line-id="lineId"
    @confirm="findLines()"
  ></CopyLineModal>
</template>
<script lang="ts" setup>
import CreateProjectLineModal from './createProjectLineModal.vue';
import EditLineModal from './editLineModal.vue';
import { useStore } from 'vuex';
import LineDao from '@/daos/line_dao';
import dayjs from 'dayjs';
import CopyLineModal from './copyLineModal.vue';
const store = useStore();
const lineDao = new LineDao();
//项目ID与项目名称获取
const projectId = store.getters.projectId;
const projectName = store.getters.projectName;
const projectType = store.getters.projectType;
//加载状态
const spinning = ref(true);
//产线存储对象
const lines = ref();
//存储产线ID
const lineId = ref();
//产线详情获取
const findLines = async () => {
  spinning.value = true;
  const result = await lineDao.findLinesByProjectId(projectId, projectType);
  spinning.value = false;
  if (result != null) lines.value = result.data.data;
};
//获取节点颜色
const getColor = (assignmentStatus) => {
  if (assignmentStatus == 0) return 'gray'; //待领取
  else if (assignmentStatus == 1) return 'blue'; //进行中
  else if (assignmentStatus == 2) return '#FADA5E'; //待批阅
  else return 'green'; //已完成
};
findLines();
//窗口开关
const createProjectLineModal = ref(false);
const editLineModal = ref(false);
const copyLineModal = ref(false);
//编辑产线
const editLine = (id) => {
  lineId.value = id;
  editLineModal.value = true;
};
</script>
<style scoped>
.container {
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 960px;
}

.header {
  padding: 0 20px;
  margin: 2px 0;
  height: 7%;
  min-height: 50px;

  display: flex;
  justify-content: space-between;
  background: #fff;
  align-items: center;
  border: 1px;
}

.project-title-font {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.body {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: 16px;
  height: 100%;

  padding: 16px;
  background: #f5f5f5;
  overflow: auto;
}

.line-box {
  width: calc(33.33% - 16px);
  height: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.line-header {
  position: relative;
  width: 100%;
  height: 45px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.line-text {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.line-button1 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.line-button2 {
  position: absolute;
  background-color: #13c2c2;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.line-body {
  flex: 1;
  padding: 18px 18px 18px 18px;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.line-body::-webkit-scrollbar {
  width: 6px;
}

.line-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.line-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
</style>
